本日小作品：
https://codepen.io/linchinhsuan/pen/ExKOMvg

練習重點摘要：

title="pixabay是一個提供可以免費商用素材的圖片網"

title這個屬性可以讓滑鼠移至物件上方時，顯示一個小小文字框來提示這個東西是什麼，這裡把pixabay這個連結上新增上title屬性，以達到說明解釋的效果。

justify-content: center;

這裡用flex讓圖片置中。

.images .img :nth-child(even){align-self: flex-end;}

透過:nth-child(even)讓偶數的圖片透過align-self: flex-end;給靠右，呈現左右左右的視覺感。

transform: rotate(90deg);

這裡純粹是因為原圖是向左的箭頭，所以特別寫了這一行，將其旋轉九十度以符合我們的需要（我們需要一個向上的箭頭）。

position: fixed;

透過此行程式碼，箭頭將固定在畫面上，透過right等等數值控制，最終將其永遠固定在畫面右下角不隨畫面捲動而改變位置。

$("html,body").animate({scrollTop:0},500);

透過在箭頭上面綁定點擊事件，我們希望達到回到最上方的效果。在最原始的情況下，只要佣錨點即使達成。但是我們希望這個從下到上的過程是動態的，所以透過jQuery來進一步新增效果。這裡使用.animate()這個語法，裡面有兩個數值，第一個是scrollTop:0代表要捲動到最上方的意思，後面的500則是動畫秒數。

Swiper套件

Swiper是一個滿好用的幻燈片套件，本作品使用的HTML結構也是遵循其官網給出的指示操作的。至於我自行更動的地方有以下。
direction: 'horizontal'將原先上下捲動的幻燈片變成左右切換。
speed:600幻燈片「切換動畫」的速度。
autoplay: {delay: 3000,}自動切換效果，如果閒置設定的秒數就會自動切換下一張。3000就是設定的秒數，1000為一秒，所以這段就是說每3秒自動切換下一張幻燈片。
其他另外的還有可以自行選擇要不要有橫向的捲軸bar（在此案例中我拿掉了）或是要不要有左右切換的方向鍵等等。

最後，附上swiper官網
https://swiperjs.com/

－－－

備註：
本小作品使用了Swiper套件
風景圖來自pixabay
icon圖片版權來自
Icons made by Freepik from www.flaticon.com

－－－

本日結語：
今天是十天，感想是Swiper真的很方便XD